<template>
  <div class="content">
    <div id="allmap" class="bm-view"></div>
    <div class="left">
      <div class="letfOne">
        <div class="iocn">
          <div class="iocn1">
            <div class="rotate"></div>
            <svg class="icon2" aria-hidden="true">
              <use xlink:href="#icon-shexiangtou"></use>
            </svg>
            <div class="title">摄像头</div>
            <div class="data">{{ this.leftOneObj.camera }}个</div>
          </div>

          <div class="iocn1" style="margin-left: 20px">
            <div class="rotate"></div>
            <svg class="icon2" aria-hidden="true">
              <use xlink:href="#icon-gonganxiaofang"></use>
            </svg>
            <div class="title">消防器</div>
            <div class="data">{{ this.leftOneObj.fireExtinguisher }}个</div>
          </div>
          <div class="iocn1" style="margin-top: 20px">
            <div class="rotate"></div>
            <svg class="icon2" aria-hidden="true">
              <use xlink:href="#icon-wenshidu"></use>
            </svg>
            <div class="title">温湿度</div>
            <div class="data">
              {{ this.leftOneObj.temperatureAndHumidity }}个
            </div>
          </div>
          <div class="iocn1" style="margin-left: 20px; margin-top: 20px">
            <div class="rotate"></div>
            <svg
              class="icon2"
              aria-hidden="true"
              style="position: absolute; left: 24px"
            >
              <use xlink:href="#icon-ludeng"></use>
            </svg>
            <div class="title">智慧灯杆</div>
            <div class="data">{{ this.leftOneObj.smartLightPole }}个</div>
          </div>
        </div>
      </div>
      <div class="letfTwo">
        <div class="bar">用户操作硬件数据</div>
        <vue-seamless-scroll
          :data="leftTwoList"
          :class-option="optionHover"
          class="seamless-warp"
        >
          <ul class="item">
            <li v-for="(item, index) in leftTwoList" :key="index">
              <span class="userName" v-text="item.userName"></span>
              <span class="time" v-text="item.time"></span>
              <span class="operation" v-text="'添加'"></span>
              <span class="name" v-text="item.name"></span>
              <span class="id" v-text="item.id + '号'"></span>
            </li>
          </ul>
        </vue-seamless-scroll>
      </div>
    </div>
    <div class="between">
      <ul>
        <li v-for="(item, index) in navList" :key="index" @click="doView(item)">
          <svg class="icon2" aria-hidden="true">
            <use
              :xlink:href="current === item.code ? item.iconCur : item.icon"
            ></use>
          </svg>
          <!-- <img :src="item.icon" /> -->
        </li>
      </ul>
    </div>
    <div class="right">
      <div class="rightOne">
        <div class="iocn">
          <div class="iocn1">
            <div class="rotate"></div>
            <svg class="icon2" aria-hidden="true">
              <use xlink:href="#icon-guangmin"></use>
            </svg>
            <div class="title">光敏</div>
            <div class="data">{{ this.rightOneObj.illumination }}个</div>
          </div>

          <div class="iocn1" style="margin-left: 20px">
            <div class="rotate"></div>
            <svg class="icon2" aria-hidden="true">
              <use xlink:href="#icon-yuyinbobao"></use>
            </svg>
            <div class="title">语音播报</div>
            <div class="data">{{ this.rightOneObj.voiceAnnouncements }}个</div>
          </div>
          <div class="iocn1" style="margin-top: 20px">
            <div class="rotate"></div>
            <svg class="icon2" aria-hidden="true">
              <use xlink:href="#icon-guangbo"></use>
            </svg>
            <div class="title">广播</div>
            <div class="data">{{ this.rightOneObj.radioBroadcast }}个</div>
          </div>
          <div class="iocn1" style="margin-left: 20px; margin-top: 20px">
            <div class="rotate"></div>
            <svg class="icon2" aria-hidden="true">
              <use xlink:href="#icon-pingmu"></use>
            </svg>
            <div class="title">显示屏</div>
            <div class="data">{{ this.rightOneObj.display }}个</div>
          </div>
        </div>
      </div>
      <div class="rightTwo">
        <div class="bar">用户绑定硬件数据</div>
        <vue-seamless-scroll
          :data="rightTwoList"
          :class-option="optionHover"
          class="seamless-warp"
        >
          <ul class="item">
            <li v-for="(item, index) in rightTwoList" :key="index">
              <span class="userName" v-text="item.userName"></span>
              <span class="time" v-text="item.time"></span>
              <span class="operation" v-text="'绑定'"></span>
              <span class="name" v-text="item.name"></span>
              <span class="id" v-text="item.id + '号'"></span>
            </li>
          </ul>
        </vue-seamless-scroll>
      </div>
    </div>
    <div class="bottom">
      <div class="bottomOne">
        <div id="main" ref="chart" style="width: 400px; height: 316px"></div>
      </div>
      <div class="bottomTwo">
        <div
          id="main2"
          ref="chart2"
          style="width: 450px; height: 316px; color: white"
        ></div>
      </div>
      <div class="bottomTree">
        <div
          id="main3"
          ref="chart3"
          style="width: 450px; height: 316px; color: white"
        ></div>
      </div>
      <div class="bottomFour">
        <div
          id="main4"
          ref="chart4"
          style="width: 450px; height: 316px; color: white"
        ></div>
      </div>
    </div>
    <!-- 添加硬件基本信息窗口 -->
    <system-dialog
      :title="sensorInformationDialog.title"
      :height="sensorInformationDialog.height"
      :width="sensorInformationDialog.width"
      :visible="sensorInformationDialog.visible"
      @onClose="onsensorInformationClose"
      @onConfirm="onsensorInformationConfirm"
    >
      <div slot="content">
        <!-- 添加硬件基本信息列表 -->
        <el-form
          :model="sensorInformationObj"
          label-width="80px"
          :inline="true"
          size="small"
        >
          <el-form-item label="经度" prop="lng">
            <el-input
              v-model="sensorInformationObj.lng"
              :disabled="true"
            ></el-input>
          </el-form-item>
          <el-form-item label="纬度" prop="lat">
            <el-input
              v-model="sensorInformationObj.lat"
              :disabled="true"
            ></el-input>
          </el-form-item>
          <el-form-item label="绑定设备" prop="deviceId">
            <el-select
              v-model="sensorInformationObj.deviceId"
              placeholder="请选择"
            >
              <el-option
                v-for="item in deviceInformationList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </system-dialog>
    <!-- 实时数据绑定弹窗 -->
    <system-dialog
      :title="sensorDataDialog.title"
      :height="sensorDataDialog.height"
      :width="sensorDataDialog.width"
      :visible="sensorDataDialog.visible"
      @onClose="onsensorDataClose"
      @onConfirm="onsensorDataConfirm"
    >
      <div slot="content">
        <!-- 实时数据绑定弹窗列表 -->
        <el-form
          :model="sensorDataObj"
          label-width="80px"
          :inline="true"
          size="small"
        >
          <!-- <el-form-item label="温度：" prop="temperature">
            <el-input v-model="sensorDataObj.temperature"></el-input>
          </el-form-item>
          <el-form-item label="湿度：" prop="humidity">
            <el-input v-model="sensorDataObj.humidity"></el-input>
          </el-form-item>
          <el-form-item label="光敏：" prop="illumination">
            <el-input v-model="sensorDataObj.illumination"></el-input>
          </el-form-item> -->
          <!-- <el-form-item label="照片：" prop="photo">
            <el-input v-model="sensorDataObj.photo"></el-input>
          </el-form-item> -->
          <el-form-item label="视频：" prop="video">
            <el-input v-model="sensorDataObj.video"></el-input>
          </el-form-item>
          <el-form-item label="编号：" prop="sensorId">
            <el-input
              v-model="sensorDataObj.sensorId"
              :disabled="true"
            ></el-input>
          </el-form-item>
          <!-- <el-form-item label="绑定硬件" prop="sensorId">
            <el-select v-model="sensorDataObj.sensorId" placeholder="请选择">
              <el-option
                v-for="item in sensorInformationNoBind"
                :key="item.id"
                :label="item.name + item.id + '号'"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item> -->
        </el-form>
      </div>
    </system-dialog>
  </div>
</template>

<script>
import vueSeamlessScroll from "vue-seamless-scroll";
import * as echarts from "echarts";
// 引入百度地图样式
import bdMapJson from "@/utils/bdMapJson";
//导入硬件基本信息api脚本
import sensorInformationApi from "@/api/sensorInformation";
//导入设备基本信息api脚本
import deviceInformationApi from "@/api/deviceInformation";
//导入sensorData脚本
import sensorDataApi from "@/api/sensorData";
//导入sensorHistoricalData脚本
import sensorHistoricalDataApi from "@/api/sensorHistoricalData";
//导入led脚本
import ledApi from "@/api/led";
//导入对话框组件
import SystemDialog from "@/components/system/SystemDialog.vue";
import { mapGetters } from "vuex";

export default {
  components: {
    vueSeamlessScroll,
    SystemDialog,
  },
  data() {
    return {
      //硬件基本信息列表
      sensorInformation: [],
      //添加和修改用户窗口属性
      sensorInformationDialog: {
        title: "",
        height: 150,
        width: 610,
        visible: false,
      },
      //实时数据绑定窗口属性
      sensorDataDialog: {
        title: "",
        height: 200,
        width: 610,
        visible: false,
      },
      //硬件基本信息对象
      sensorInformationObj: {
        id: "",
        name: "",
        time: "",
        lng: "",
        lat: "",
        userName: this.$store.getters.userName,
        deviceId: "",
      },
      //实时数据对象
      sensorDataObj: {
        id: "",
        temperature: "",
        humidity: "",
        illumination: "",
        photo: "",
        video: "",
        sensorId: "",
      },
      //地图样式
      mapStyle: {
        styleJson: [],
      },
      current: "0",
      //添加设备
      navList: [
        {
          code: "0",
          icon: "#icon-igw-l-gesture",
          iconCur: "#icon-igw-l-gesture-copy",
        },
        {
          code: "1",
          icon: "#icon-curve",
          iconCur: "#icon-curve-copy",
        },
        {
          code: "2",
          icon: "#icon-checkbox",
          iconCur: "#icon-checkbox-copy",
        },
        {
          code: "3",
          icon: "#icon-polygon-fill",
          iconCur: "#icon-polygon-fill-copy",
        },
        {
          code: "4",
          icon: "#icon-yuanxingweixuanzhong",
          iconCur: "#icon-yuanxingweixuanzhong-copy",
        },
        {
          code: "5",
          icon: "#icon-shexiangtou",
          iconCur: "#icon-shexiangtou-copy",
        },
        {
          code: "6",
          icon: "#icon-gonganxiaofang",
          iconCur: "#icon-gonganxiaofang-copy",
        },
        {
          code: "7",
          icon: "#icon-wenshidu",
          iconCur: "#icon-wenshidu-copy",
        },
        {
          code: "8",
          icon: "#icon-ludeng",
          iconCur: "#icon-ludeng-copy",
        },
        {
          code: "9",
          icon: "#icon-guangmin",
          iconCur: "#icon-guangmin-copy",
        },
        {
          code: "10",
          icon: "#icon-yuyinbobao",
          iconCur: "#icon-yuyinbobao-copy",
        },
        {
          code: "11",
          icon: "#icon-guangbo",
          iconCur: "#icon-guangbo-copy",
        },
        {
          code: "12",
          icon: "#icon-pingmu",
          iconCur: "#icon-pingmu-copy",
        },
      ],
      value: true,
      //左二列表
      leftTwoList: [],
      //右二列表
      rightTwoList: [],
      drawingManager: {},
      //地图
      bdMap: {},
      //硬件基本信息列表未绑定
      sensorInformationNoBind: [],
      //硬件基本信息列表绑定
      sensorInformationBind: [],
      //设备基本信息列表
      deviceInformationList: [],
      //画图类型
      drawingType: "",
      leftOneObj: {
        camera: 0,
        fireExtinguisher: 0,
        temperatureAndHumidity: 0,
        smartLightPole: 0,
      },
      rightOneObj: {
        illumination: 0,
        voiceAnnouncements: 0,
        radioBroadcast: 0,
        display: 0,
      },
      labelStyle: {
        // 自定义提示框样式
        padding: "0px",
        color: "#000",
        fontSize: "12px",
        minHeight: "20px",
        borderColor: "rgba(0, 0, 0, 0)",
        lineHeight: "20px",
        fontFamily: "微软雅黑",
        backgroundColor: "rgba(255,255,255, 0)",
        cursor: "pointer",
      },
      //保存弹窗下标号
      labelMarkers: {},
      //设备信息列表
      deviceInformationObj: {
        creatTime: "",
        id: "",
        lat: 0,
        lng: 0,
        name: "",
      },
      //历史温度
    };
  },
  computed: {
    optionHover() {
      return {
        hoverStop: true, // 鼠标悬停停止滚动
        direction: 1, // 向下/上滚动
        step: 0.5, // 滚动速度
        // singleHeight: 20, // 滚动单行
        // waitTime:2500 单行停顿时间
      };
    },
  },
  created() {
    /**
     * 百度地图样式
     */
    this.mapStyle.styleJson = bdMapJson.styleJson;
  },
  mounted() {
    //百度地图创建
    this.createMpa();
    //查询设备基本信息列表
    this.getDeviceInformationListApi();
    //查询硬件个数
    this.selectSensor();
    //挂载移除单个硬件弹窗方法
    window.removeOverlay1 = (id) => {
      this.removeOverlay1(id);
    };
    //挂载控制开关灯方法
    window.Btnled = (act) => {
      this.Btnled(act);
    };
    //挂载控制开关灯方法
    window.Btnled2 = (act) => {
      this.Btnled2(act);
    };
    //挂载控制开关灯方法
    window.Btnled3 = (act) => {
      this.Btnled3(act);
    };
    //挂载语音播报方法
    window.myFunction = (act) => {
      this.myFunction(act);
    };
    //挂载播歌方法
    window.myFunction5 = (act) => {
      this.myFunction5(act);
    };
    //查询5条用户操作硬件基本信息
    this.postSensorInformationByUserNameApi();
    //查询5条用户绑定硬件基本信息
    this.postSensorInformationBindByUserNameApi();
    //查询历史数据
    this.postSensorHistoricalDataByDeviceIdApi();
    this.timer = setInterval(() => {
      this.postSensorHistoricalDataByDeviceIdApi();
    }, 6000);
  },
  beforeDestroy() {
    //页面关闭前关闭定时器 （这个才有用）
    clearInterval(this.timer);
  },
  methods: {
    /**
     * 查询5条用户绑定记录
     */
    postSensorInformationBindByUserNameApi() {
      this.$nextTick(async () => {
        let params = { userName: this.$store.getters.userName };
        let res =
          await sensorInformationApi.postSensorInformationBindByUserNameApi(
            params
          );
        this.rightTwoList = res.data;
      });
    },
    /**
     * 查询5条用户操作记录
     */
    postSensorInformationByUserNameApi() {
      this.$nextTick(async () => {
        let params = { userName: this.$store.getters.userName };
        let res = await sensorInformationApi.postSensorInformationByUserNameApi(
          params
        );
        this.leftTwoList = res.data;
      });
    },
    /**
     * 查询历史数据7条记录
     */
    async postSensorHistoricalDataByDeviceIdApi() {
      //先写死
      let params = { deviceId: "b8:27:eb:ca:2b:5b" };
      let res =
        await sensorHistoricalDataApi.postSensorHistoricalDataByDeviceIdApi(
          params
        );
      var temperature = [];
      var time = [];
      var humidity = [];
      var illumination = [];
      var that = this;
      for (let i = 0; i < res.data.length; i++) {
        const e = res.data[i];
        temperature[i] = e.temperature;
        humidity[i] = e.humidity;
        illumination[i] = e.illumination;
        let chinaStandardTime = new Date(e.time);
        let nowTime = this.$timestampToTime2(
          chinaStandardTime
            .toLocaleString("en-US", { hour12: false })
            .split(" ")
        );
        time[i] = nowTime;
      }
      this.echarts2(temperature, humidity, illumination, time);
    },
    /**
     * 查询历史数据1条记录
     */
    async postSensorHistoricalDataByDeviceIdOneApi() {
      //先写死
      let params = { deviceId: "b8:27:eb:ca:2b:5b" };
      let res =
        await sensorHistoricalDataApi.postSensorHistoricalDataByDeviceIdOneApi(
          params
        );
    },
    /**
     * 查询设备基本信息列表
     */
    async getDeviceInformationListApi() {
      let res = await deviceInformationApi.getDeviceInformationListApi();
      this.deviceInformationList = res.data;
    },
    createMpa() {
      // GL版命名空间为BMapGL
      // 按住鼠标右键，修改倾斜角和角度
      var map = new BMapGL.Map("allmap"); // 创建Map实例
      map.centerAndZoom(
        new BMapGL.Point(119.65203497210796, 27.120922274037253),
        20
      ); // 初始化地图,设置中心点坐标和地图级别
      map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
      map.setMapStyleV2({
        styleId: "4a49d63086fc00f6457e87f0fd965c7c",
      });
      //设置角度
      map.setHeading(150.5);
      map.setTilt(63);
      var styleOptions = {
        strokeColor: "#5E87DB", // 边线颜色
        fillColor: "#5E87DB", // 填充颜色。当参数为空时，圆形没有填充颜色
        strokeWeight: 2, // 边线宽度，以像素为单位
        strokeOpacity: 1, // 边线透明度，取值范围0-1
        fillOpacity: 0.2, // 填充透明度，取值范围0-1
      };
      var labelOptions = {
        borderRadius: "2px",
        background: "#FFFBCC",
        border: "1px solid #E1E1E1",
        color: "#703A04",
        fontSize: "12px",
        letterSpacing: "0",
        padding: "5px",
      };
      //设置图标
      // 创建摄像头图标
      var myIcon = new BMapGL.Icon(
        "static/dataVisualization/commandCenter/shexiangtou.png",
        new BMapGL.Size(100, 170)
      );
      var styleOptions1 = {
        icon: myIcon,
      };
      // 实例化鼠标绘制工具
      this.drawingManager = new BMapGLLib.DrawingManager(map, {
        // isOpen: true,        // 是否开启绘制模式
        enableCalculate: false, // 绘制是否进行测距测面
        enableSorption: true, // 是否开启边界吸附功能
        sorptiondistance: 20, // 边界吸附距离
        circleOptions: styleOptions, // 圆的样式
        polylineOptions: styleOptions, // 线的样式
        polygonOptions: styleOptions, // 多边形的样式
        rectangleOptions: styleOptions, // 矩形的样式
        labelOptions: labelOptions, // label样式
        markerOptions: styleOptions1, //摄像头样式
      });
      // 绘制覆盖层后给覆盖层添加监听事件
      this.drawingManager.addEventListener("markercomplete", (e, overlay) => {
        if (this.current == "5") {
          this.sensorInformationDialog.title = "添加摄像头";
          this.sensorInformationObj.name = "摄像头";
        } else if (this.current == "6") {
          this.sensorInformationDialog.title = "添加消防器";
          this.sensorInformationObj.name = "消防器";
        } else if (this.current == "7") {
          this.sensorInformationDialog.title = "添加温湿度";
          this.sensorInformationObj.name = "温湿度";
        } else if (this.current == "8") {
          this.sensorInformationDialog.title = "添加智慧灯杆";
          this.sensorInformationObj.name = "智慧灯杆";
        } else if (this.current == "9") {
          this.sensorInformationDialog.title = "添加光敏";
          this.sensorInformationObj.name = "光敏";
        } else if (this.current == "10") {
          this.sensorInformationDialog.title = "添加语音播报";
          this.sensorInformationObj.name = "语音播报";
        } else if (this.current == "11") {
          this.sensorInformationDialog.title = "添加广播";
          this.sensorInformationObj.name = "广播";
        } else if (this.current == "12") {
          this.sensorInformationDialog.title = "添加显示屏";
          this.sensorInformationObj.name = "显示屏";
        }
        //给要添加的硬件基本信息添加经度纬度
        this.sensorInformationObj.lng = overlay.latLng.lng;
        this.sensorInformationObj.lat = overlay.latLng.lat;
        this.sensorInformationDialog.visible = true; //显示窗口
      });
      //右键菜单
      var menu = new BMapGL.ContextMenu();
      var txtMenuItem = [
        {
          text: "清空覆盖物",
          callback: function () {
            map.clearOverlays();
          },
        },
      ];
      for (var i = 0; i < txtMenuItem.length; i++) {
        menu.addItem(
          new BMapGL.MenuItem(txtMenuItem[i].text, txtMenuItem[i].callback, 100)
        );
      }
      map.addContextMenu(menu);
      //保存地图
      this.bdMap = map;
      //添加点标记
      this.pointMarkers();
    },
    // 清除所有覆盖物
    allRemoveOverlay() {
      const result = this.sensorInformation;
      result.forEach((item, index) => {
        var id = item.id;
        this.bdMap.removeOverlay(this.labelMarkers[id]);
      });
    },
    //移除单个点位上图弹窗
    removeOverlay1(id) {
      this.bdMap.removeOverlay(this.labelMarkers[id]);
    },
    //控制开关灯
    async Btnled(act) {
      var actionObj = {
        deviceId: "b8:27:eb:da:dd:d7",
        unit: 1,
        act: act,
      };
      let res = await ledApi.addLedApi(actionObj);
    },
    //控制开关灯
    async Btnled2(act) {
      var actionObj = {
        deviceId: "b8:27:eb:da:dd:d7",
        unit: 2,
        act: act,
      };
      let res = await ledApi.addLedApi(actionObj);
    },
    //控制开关灯
    async Btnled3(act) {
      var actionObj = {
        deviceId: "b8:27:eb:da:dd:d7",
        unit: 3,
        act: act,
      };
      let res = await ledApi.addLedApi(actionObj);
    },
    async myFunction() {
      var x = document.getElementById("myInput").value;
      var actionObj = {
        deviceId: "b8:27:eb:da:dd:d7",
        unit: 4,
        act: x,
      };
      let res = await ledApi.addLedApi(actionObj);
    },
    async myFunction5() {
      var x = document.getElementById("myInput").value;
      var actionObj = {
        deviceId: "b8:27:eb:da:dd:d7",
        unit: 5,
        act: x,
      };
      let res = await ledApi.addLedApi(actionObj);
    },
    /**
     * 添加实时数据取消事件
     */
    onsensorDataClose() {
      this.sensorDataDialog.visible = false; //关闭窗口
    },
    /**
     * 添加实时数据确认事件
     */
    onsensorDataConfirm() {
      //添加实时数据
      this.addSensorDataApi();
      // this.createMpa();
      this.sensorDataDialog.visible = false; //关闭窗口
    },
    /**
     * 添加硬件基本信息取消事件
     */
    onsensorInformationClose() {
      this.sensorInformationDialog.visible = false; //关闭窗口
    },
    /**
     * 添加硬件基本信息确认事件
     */
    onsensorInformationConfirm() {
      //添加硬件基本信息
      this.addSensorInformationApi();
      // this.createMpa();
      this.sensorInformationDialog.visible = false; //关闭窗口
    },
    /**
     * 添加硬件基本信息
     */
    addSensorInformationApi() {
      this.$nextTick(async () => {
        let time = new Date();
        let nowTime = this.$timestampToTime(
          time.toLocaleString("en-US", { hour12: false }).split(" ")
        );
        //获取当前时间
        this.sensorInformationObj.time = nowTime;
        let params = this.sensorInformationObj;
        let res = await sensorInformationApi.addSensorInformationApi(params);
        if (res.success) {
          //刷新左二列表信息
          this.postSensorInformationByUserNameApi();
          //刷新硬件个数
          this.selectSensor();
        }
      });
    },
    /**
     * 添加实时数据
     */
    addSensorDataApi() {
      this.$nextTick(async () => {
        let params = this.sensorDataObj;
        let res = await sensorDataApi.addSensorDataApi(params);
        if (res.success) {
          //刷新右二列表
          this.postSensorInformationBindByUserNameApi();
          //刷新硬件个数
          this.selectSensor();
        }
      });
    },
    /**
     * 硬件个数查询
     */
    async selectSensor() {
      let res = await sensorInformationApi.postSensorInformationCountByNameApi({
        name: "摄像头",
      });
      let res2 = await sensorInformationApi.postSensorInformationCountByNameApi(
        {
          name: "消防器",
        }
      );
      let res3 = await sensorInformationApi.postSensorInformationCountByNameApi(
        {
          name: "温湿度",
        }
      );
      let res4 = await sensorInformationApi.postSensorInformationCountByNameApi(
        {
          name: "智慧灯杆",
        }
      );
      let res5 = await sensorInformationApi.postSensorInformationCountByNameApi(
        {
          name: "光敏",
        }
      );
      let res6 = await sensorInformationApi.postSensorInformationCountByNameApi(
        {
          name: "语音播报",
        }
      );
      let res7 = await sensorInformationApi.postSensorInformationCountByNameApi(
        {
          name: "广播",
        }
      );
      let res8 = await sensorInformationApi.postSensorInformationCountByNameApi(
        {
          name: "显示屏",
        }
      );
      this.leftOneObj.camera = res.data;
      this.leftOneObj.fireExtinguisher = res2.data;
      this.leftOneObj.temperatureAndHumidity = res3.data;
      this.leftOneObj.smartLightPole = res4.data;
      this.rightOneObj.illumination = res5.data;
      this.rightOneObj.voiceAnnouncements = res6.data;
      this.rightOneObj.radioBroadcast = res7.data;
      this.rightOneObj.display = res8.data;
      this.echarts1(this.leftOneObj);
      this.echarts3(this.leftOneObj, this.rightOneObj);
      this.echarts4(this.rightOneObj);
    },
    /**
     * 查询未绑定硬件信息
     */
    async getSensorInformationNoBind() {
      let res = await sensorInformationApi.getSensorInformationNoBindApi();
      this.sensorInformationNoBind = res.data;
    },
    //添加点标记
    async pointMarkers() {
      /**
       * 查询硬件基本信息列表
       */
      let res = await sensorInformationApi.getSensorInformationListApi();
      if (res.success) {
        this.sensorInformation = res.data;
        for (let i = 0; i < res.data.length; i++) {
          const element = res.data[i];
          if (element.name == "摄像头") {
            // 创建点图标
            let myIcon = new BMapGL.Icon(
              "static/dataVisualization/commandCenter/shexiangtou.png",
              new BMapGL.Size(100, 170)
            );
            // 创建Marker标注，使用点图标
            let pt = new BMapGL.Point(element.lng, element.lat);
            let marker = new BMapGL.Marker(pt, {
              icon: myIcon,
            });
            // 将标注添加到地图
            this.bdMap.addOverlay(marker);
            // 点标记添加点击事件
            var that = this;
            marker.addEventListener("click", async function () {
              var opts = {
                position: new BMapGL.Point(element.lng, element.lat), // 指定文本标注所在的地理位置
                offset: new BMapGL.Size(-210, -270), // 设置文本偏移量
              };
              that.sensorDataObj.sensorId = element.id;
              //查询deviceInformation
              let params = { id: element.deviceId };
              let res =
                await deviceInformationApi.getDeviceInformationByDeviceId(
                  params
                );
              let deviceInformationObj = res.data;
              //查询sensorData
              let params2 = { id: element.id };
              let res2 = await sensorDataApi.getSensorDataByDeviceId(params2);
              let sensorDataObj = res2.data;
              //判断弹窗是否绑定实时数据
              if (res.data != null && res2.data != null) {
                //获取弹窗内容
                var content = that.getAlarmContent(
                  element,
                  [element.lng, element.lat],
                  deviceInformationObj,
                  sensorDataObj
                );
              } else {
                alert("未绑定");
                that.getSensorInformationNoBind();
                var content = "";
                that.sensorDataDialog.visible = true;
                that.sensorDataDialog.title = "实时数据绑定";
              }
              // 创建文本标注对象
              var label = new BMapGL.Label(content, opts);
              // 自定义文本标注样式
              label.setStyle(that.labelStyle);
              that.allRemoveOverlay();
              that.bdMap.addOverlay(label);
              //保存弹窗下标到labelMarkers
              that.labelMarkers[element.id] = label;
            });
          }
          if (element.name == "消防器") {
            // 创建点图标
            let myIcon = new BMapGL.Icon(
              "static/dataVisualization/commandCenter/gonganxiaofang.png",
              new BMapGL.Size(100, 170)
            );
            // 创建Marker标注，使用点图标
            let pt = new BMapGL.Point(element.lng, element.lat);
            let marker = new BMapGL.Marker(pt, {
              icon: myIcon,
            });
            // 将标注添加到地图
            this.bdMap.addOverlay(marker);
            // 点标记添加点击事件
            var that = this;
            marker.addEventListener("click", async function () {
              var opts = {
                position: new BMapGL.Point(element.lng, element.lat), // 指定文本标注所在的地理位置
                offset: new BMapGL.Size(-210, -270), // 设置文本偏移量
              };
              let params = { id: element.deviceId };
              let res =
                await deviceInformationApi.getDeviceInformationByDeviceId(
                  params
                );
              let deviceInformationObj = res.data;
              that.sensorDataObj.sensorId = element.id;
              //查询sensorData
              let params2 = { id: element.id };
              let res2 = await sensorDataApi.getSensorDataByDeviceId(params2);
              let sensorDataObj = res2.data;
              //判断弹窗是否绑定实时数据
              if (res.data != null && res2.data != null) {
                //获取弹窗内容
                var content = that.getAlarmContent(
                  element,
                  [element.lng, element.lat],
                  deviceInformationObj,
                  sensorDataObj
                );
              } else {
                alert("未绑定");
                var content = "";
                that.sensorDataDialog.visible = true;
                that.sensorDataDialog.title = "实时数据绑定";
              }
              // 创建文本标注对象
              var label = new BMapGL.Label(content, opts);
              // 自定义文本标注样式
              label.setStyle(that.labelStyle);
              that.allRemoveOverlay();
              that.bdMap.addOverlay(label);
              //保存弹窗下标到labelMarkers
              that.labelMarkers[element.id] = label;
            });
          }
          if (element.name == "温湿度") {
            // 创建点图标
            let myIcon = new BMapGL.Icon(
              "static/dataVisualization/commandCenter/temperatureAddHumidity.png",
              new BMapGL.Size(100, 170)
            );
            // 创建Marker标注，使用点图标
            let pt = new BMapGL.Point(element.lng, element.lat);
            let marker = new BMapGL.Marker(pt, {
              icon: myIcon,
            });
            // 将标注添加到地图
            this.bdMap.addOverlay(marker);
            // 点标记添加点击事件
            var that = this;
            marker.addEventListener("click", async function () {
              var opts = {
                position: new BMapGL.Point(element.lng, element.lat), // 指定文本标注所在的地理位置
                offset: new BMapGL.Size(-210, -270), // 设置文本偏移量
              };
              let params = { id: element.deviceId };
              let res =
                await deviceInformationApi.getDeviceInformationByDeviceId(
                  params
                );
              let deviceInformationObj = res.data;
              that.sensorDataObj.sensorId = element.id;
              //查询sensorData
              let params2 = { id: element.id };
              let res2 = await sensorDataApi.getSensorDataByDeviceId(params2);
              let sensorDataObj = res2.data;
              //判断弹窗是否绑定实时数据
              if (res.data != null && res2.data != null) {
                //获取弹窗内容
                var content = that.getAlarmContent(
                  element,
                  [element.lng, element.lat],
                  deviceInformationObj,
                  sensorDataObj
                );
              } else {
                alert("未绑定");
                var content = "";
                that.sensorDataDialog.visible = true;
                that.sensorDataDialog.title = "实时数据绑定";
              }
              // 创建文本标注对象
              var label = new BMapGL.Label(content, opts);
              // 自定义文本标注样式
              label.setStyle(that.labelStyle);
              that.allRemoveOverlay();
              that.bdMap.addOverlay(label);
              //保存弹窗下标到labelMarkers
              that.labelMarkers[element.id] = label;
            });
          }
          if (element.name == "智慧灯杆") {
            // 创建点图标
            let myIcon = new BMapGL.Icon(
              "static/dataVisualization/commandCenter/smartLightPole.png",
              new BMapGL.Size(100, 170)
            );
            // 创建Marker标注，使用点图标
            let pt = new BMapGL.Point(element.lng, element.lat);
            let marker = new BMapGL.Marker(pt, {
              icon: myIcon,
            });
            // 将标注添加到地图
            this.bdMap.addOverlay(marker);
            // 点标记添加点击事件
            var that = this;
            marker.addEventListener("click", async function () {
              var opts = {
                position: new BMapGL.Point(element.lng, element.lat), // 指定文本标注所在的地理位置
                offset: new BMapGL.Size(-210, -270), // 设置文本偏移量
              };
              let params = { id: element.deviceId };
              let res =
                await deviceInformationApi.getDeviceInformationByDeviceId(
                  params
                );
              let deviceInformationObj = res.data;
              that.sensorDataObj.sensorId = element.id;
              //查询sensorData
              let params2 = { id: element.id };
              let res2 = await sensorDataApi.getSensorDataByDeviceId(params2);
              let sensorDataObj = res2.data;
              //判断弹窗是否绑定实时数据
              if (res.data != null && res2.data != null) {
                //获取弹窗内容
                var content = that.getAlarmContent(
                  element,
                  [element.lng, element.lat],
                  deviceInformationObj,
                  sensorDataObj
                );
              } else {
                alert("未绑定");
                var content = "";
                that.sensorDataDialog.visible = true;
                that.sensorDataDialog.title = "实时数据绑定";
              }
              // 创建文本标注对象
              var label = new BMapGL.Label(content, opts);
              // 自定义文本标注样式
              label.setStyle(that.labelStyle);
              that.allRemoveOverlay();
              that.bdMap.addOverlay(label);
              //保存弹窗下标到labelMarkers
              that.labelMarkers[element.id] = label;
            });
          }
          if (element.name == "光敏") {
            // 创建点图标
            let myIcon = new BMapGL.Icon(
              "static/dataVisualization/commandCenter/illumination.png",
              new BMapGL.Size(100, 170)
            );
            // 创建Marker标注，使用点图标
            let pt = new BMapGL.Point(element.lng, element.lat);
            let marker = new BMapGL.Marker(pt, {
              icon: myIcon,
            });
            // 将标注添加到地图
            this.bdMap.addOverlay(marker);
            // 点标记添加点击事件
            var that = this;
            marker.addEventListener("click", async function () {
              var opts = {
                position: new BMapGL.Point(element.lng, element.lat), // 指定文本标注所在的地理位置
                offset: new BMapGL.Size(-210, -270), // 设置文本偏移量
              };
              let params = { id: element.deviceId };
              let res =
                await deviceInformationApi.getDeviceInformationByDeviceId(
                  params
                );
              let deviceInformationObj = res.data;
              that.sensorDataObj.sensorId = element.id;
              //查询sensorData
              let params2 = { id: element.id };
              let res2 = await sensorDataApi.getSensorDataByDeviceId(params2);
              let sensorDataObj = res2.data;
              //判断弹窗是否绑定实时数据
              if (res.data != null && res2.data != null) {
                //获取弹窗内容
                var content = that.getAlarmContent(
                  element,
                  [element.lng, element.lat],
                  deviceInformationObj,
                  sensorDataObj
                );
              } else {
                alert("未绑定");
                var content = "";
                that.sensorDataDialog.visible = true;
                that.sensorDataDialog.title = "实时数据绑定";
              }
              // 创建文本标注对象
              var label = new BMapGL.Label(content, opts);
              // 自定义文本标注样式
              label.setStyle(that.labelStyle);
              that.allRemoveOverlay();
              that.bdMap.addOverlay(label);
              //保存弹窗下标到labelMarkers
              that.labelMarkers[element.id] = label;
            });
          }
          if (element.name == "语音播报") {
            // 创建点图标
            let myIcon = new BMapGL.Icon(
              "static/dataVisualization/commandCenter/voiceAnnouncements.png",
              new BMapGL.Size(100, 170)
            );
            // 创建Marker标注，使用点图标
            let pt = new BMapGL.Point(element.lng, element.lat);
            let marker = new BMapGL.Marker(pt, {
              icon: myIcon,
            });
            // 将标注添加到地图
            this.bdMap.addOverlay(marker);
            // 点标记添加点击事件
            var that = this;
            marker.addEventListener("click", async function () {
              var opts = {
                position: new BMapGL.Point(element.lng, element.lat), // 指定文本标注所在的地理位置
                offset: new BMapGL.Size(-210, -270), // 设置文本偏移量
              };
              let params = { id: element.deviceId };
              let res =
                await deviceInformationApi.getDeviceInformationByDeviceId(
                  params
                );
              let deviceInformationObj = res.data;
              that.sensorDataObj.sensorId = element.id;
              //查询sensorData
              let params2 = { id: element.id };
              let res2 = await sensorDataApi.getSensorDataByDeviceId(params2);
              let sensorDataObj = res2.data;
              //判断弹窗是否绑定实时数据
              if (res.data != null && res2.data != null) {
                //获取弹窗内容
                var content = that.getAlarmContent(
                  element,
                  [element.lng, element.lat],
                  deviceInformationObj,
                  sensorDataObj
                );
              } else {
                alert("未绑定");
                var content = "";
                that.sensorDataDialog.visible = true;
                that.sensorDataDialog.title = "实时数据绑定";
              }
              // 创建文本标注对象
              var label = new BMapGL.Label(content, opts);
              // 自定义文本标注样式
              label.setStyle(that.labelStyle);
              that.allRemoveOverlay();
              that.bdMap.addOverlay(label);
              //保存弹窗下标到labelMarkers
              that.labelMarkers[element.id] = label;
            });
          }
          if (element.name == "广播") {
            // 创建点图标
            let myIcon = new BMapGL.Icon(
              "static/dataVisualization/commandCenter/radioBroadcast.png",
              new BMapGL.Size(100, 170)
            );
            // 创建Marker标注，使用点图标
            let pt = new BMapGL.Point(element.lng, element.lat);
            let marker = new BMapGL.Marker(pt, {
              icon: myIcon,
            });
            // 将标注添加到地图
            this.bdMap.addOverlay(marker);
            // 点标记添加点击事件
            var that = this;
            marker.addEventListener("click", async function () {
              var opts = {
                position: new BMapGL.Point(element.lng, element.lat), // 指定文本标注所在的地理位置
                offset: new BMapGL.Size(-210, -270), // 设置文本偏移量
              };
              let params = { id: element.deviceId };
              let res =
                await deviceInformationApi.getDeviceInformationByDeviceId(
                  params
                );
              let deviceInformationObj = res.data;
              that.sensorDataObj.sensorId = element.id;
              //查询sensorData
              let params2 = { id: element.id };
              let res2 = await sensorDataApi.getSensorDataByDeviceId(params2);
              let sensorDataObj = res2.data;
              //判断弹窗是否绑定实时数据
              if (res.data != null && res2.data != null) {
                //获取弹窗内容
                var content = that.getAlarmContent(
                  element,
                  [element.lng, element.lat],
                  deviceInformationObj,
                  sensorDataObj
                );
              } else {
                alert("未绑定");
                var content = "";
                that.sensorDataDialog.visible = true;
                that.sensorDataDialog.title = "实时数据绑定";
              }
              // 创建文本标注对象
              var label = new BMapGL.Label(content, opts);
              // 自定义文本标注样式
              label.setStyle(that.labelStyle);
              that.allRemoveOverlay();
              that.bdMap.addOverlay(label);
              //保存弹窗下标到labelMarkers
              that.labelMarkers[element.id] = label;
            });
          }
          if (element.name == "显示屏") {
            // 创建点图标
            let myIcon = new BMapGL.Icon(
              "static/dataVisualization/commandCenter/display.png",
              new BMapGL.Size(100, 170)
            );
            // 创建Marker标注，使用点图标
            let pt = new BMapGL.Point(element.lng, element.lat);
            let marker = new BMapGL.Marker(pt, {
              icon: myIcon,
            });
            // 将标注添加到地图
            this.bdMap.addOverlay(marker);
            // 点标记添加点击事件
            var that = this;
            marker.addEventListener("click", async function () {
              var opts = {
                position: new BMapGL.Point(element.lng, element.lat), // 指定文本标注所在的地理位置
                offset: new BMapGL.Size(-210, -270), // 设置文本偏移量
              };
              let params = { id: element.deviceId };
              let res =
                await deviceInformationApi.getDeviceInformationByDeviceId(
                  params
                );
              let deviceInformationObj = res.data;
              that.sensorDataObj.sensorId = element.id;
              //查询sensorData
              let params2 = { id: element.id };
              let res2 = await sensorDataApi.getSensorDataByDeviceId(params2);
              let sensorDataObj = res2.data;
              //判断弹窗是否绑定实时数据
              if (res.data != null && res2.data != null) {
                //获取弹窗内容
                var content = that.getAlarmContent(
                  element,
                  [element.lng, element.lat],
                  deviceInformationObj,
                  sensorDataObj
                );
              } else {
                alert("未绑定");
                var content = "";
                that.sensorDataDialog.visible = true;
                that.sensorDataDialog.title = "实时数据绑定";
              }
              // 创建文本标注对象
              var label = new BMapGL.Label(content, opts);
              // 自定义文本标注样式
              label.setStyle(that.labelStyle);
              that.allRemoveOverlay();
              that.bdMap.addOverlay(label);
              //保存弹窗下标到labelMarkers
              that.labelMarkers[element.id] = label;
            });
          }
        }
      }
    },
    /**
     * 获取硬件弹窗内容
     */
    getAlarmContent(item, point, deviceInformationObj, sensorDataObj) {
      var content = "";
      var faceContent = `<div style="cursor: default;width: auto;min-width: 320px;height: 200px;padding:7px 7px 0px 6px;background: url(static/dataVisualization/commandCenter/popupBackground.png) no-repeat;background-size: 100% 100%;color:#fff;">
        <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 6px;">
          <div style="font-size: 16px;font-family: Microsoft YaHei;font-weight: 400;font-style: italic;color: #31AEFE;">${
            item.name === undefined ? "" : item.name
          }</div>
          <div style="margin: 0 auto 0 9px;"><img src="static/dataVisualization/commandCenter/line-lan.png"></div>
          <div style="cursor: pointer;cursor: pointer;"><img src="static/dataVisualization/commandCenter/close.png" onclick="removeOverlay1('${
            item.id
          }')"></div>
        </div>
        <div style="display: flex;justify-content: flex-start;align-items: center;padding: 0 6px;">
             <viewer><img style="width:200px;height:127px;margin-right: 8px;" src="${
               sensorDataObj.video
             }"></viewer>
            <div style="width:calc(100% - 224px);">
                <div style="font-size:16px;font-weight: bold;color:#0092EE;margin-bottom: 5px;">${
                  deviceInformationObj.name
                }:<span style="color:#fff;margin-left: 5px;">编号：${
        item.id
      }</span></div>
                <div><span style="color:#A8D6FF;margin-right: 5px;">经度:</span>${
                  item.lng
                }</div>
                <div><span style="color:#A8D6FF;margin-right: 5px;">纬度:</span>${
                  item.lat
                }</div>
                <div><span style="color:#A8D6FF;margin-right: 5px;">创建时间:</span>${
                  item.time
                }</div>
                <div><span style="color:#A8D6FF;margin-right: 5px;">设备编号:</span>${
                  item.deviceId
                }</div>
            </div>
        </div>
      </div>`;
      var aiContent = `<div style="cursor: default;width: auto;min-width: 320px;height: 200px;padding:7px 7px 0px 6px;background: url(static/dataVisualization/commandCenter/firePopUpWindow.png) no-repeat;background-size: 100% 100%;color:#fff;">
        <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 6px;">
          <div style="font-size: 16px;font-family: Microsoft YaHei;font-weight: 400;font-style: italic;color: #F34336;">${item.name}</div>
          <div style="margin: 0 auto 0 9px;"><img src="static/dataVisualization/commandCenter/line-red.png"></div>
          <div style="cursor: pointer;margin:9px 2px 0px 0px;cursor: pointer;"><img src="static/dataVisualization/commandCenter/closeRed.png" onclick="removeOverlay1('${item.id}')"></div>
        </div>
        <div style="display: flex;justify-content: flex-start;align-items: center;padding: 0 6px;">
             <viewer><img style="width:200px;height:127px;margin-right: 8px;" src="${sensorDataObj.photo}"></viewer>
            <div style="width:calc(100% - 224px);">
                <div style="font-size:16px;font-weight: bold;color:#F34336;margin-bottom: 5px;">${deviceInformationObj.name}:<span style="color:#fff;margin-left: 5px;">编号：${item.id}</span></div>
                <div><span style="color:#FFA051;margin-right: 5px;">经度:</span>${item.lng}</div>
                <div><span style="color:#FFA051;margin-right: 5px;">纬度:</span>${item.lat}</div>
                <div><span style="color:#FFA051;margin-right: 5px;">创建时间:</span>${item.time}</div>
                <div><span style="color:#FFA051;margin-right: 5px;">设备编号:</span>${item.deviceId}</div>
            </div>
        </div>
      </div>`;
      var zhdgContent = `<div style="cursor: default;width: auto;min-width: 320px;height: 200px;padding:7px 7px 0px 6px;background: url(static/dataVisualization/commandCenter/firePopUpWindow.png) no-repeat;background-size: 100% 100%;color:#fff;">
        <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 6px;">
          <div style="font-size: 16px;font-family: Microsoft YaHei;font-weight: 400;font-style: italic;color: #F34336;">${item.name}</div>
          <div style="margin: 0 auto 0 9px;"><img src="static/dataVisualization/commandCenter/line-red.png"></div>
          <div style="cursor: pointer;margin:9px 2px 0px 0px;cursor: pointer;"><img src="static/dataVisualization/commandCenter/closeRed.png" onclick="removeOverlay1('${item.id}')"></div>
        </div>
        <div style="display: flex;justify-content: flex-start;align-items: center;padding: 0 6px;">
             <viewer><img style="width:200px;height:127px;margin-right: 8px;" src="${sensorDataObj.photo}"></viewer>
            <div style="width:calc(100% - 224px);">
                <div style="font-size:16px;font-weight: bold;color:#F34336;margin-bottom: 5px;">${deviceInformationObj.name}:<span style="color:#fff;margin-left: 5px;">编号：${item.id}</span></div>
                <div><span style="color:#FFA051;margin-right: 5px;">经度:</span>${item.lng}</div>
                <div><span style="color:#FFA051;margin-right: 5px;">纬度:</span>${item.lat}</div>
                <div>
                  <span style="color:#FFA051;margin-right: 5px;">红灯:</span><button onclick="Btnled(0)">关灯</button><button onclick="Btnled(1)">开灯</button><button onclick="Btnled(2)">翻转</button>
                </div>
                <div>
                  <span style="color:#FFA051;margin-right: 5px;">黄灯:</span><button onclick="Btnled2(0)">关灯</button><button onclick="Btnled2(1)">开灯</button><button onclick="Btnled2(2)">翻转</button>
                </div>
                <div>
                  <span style="color:#FFA051;margin-right: 5px;">绿灯:</span><button onclick="Btnled3(0)">关灯</button><button onclick="Btnled3(1)">开灯</button><button onclick="Btnled3(2)">翻转</button>
                </div>
            </div>
        </div>
      </div>`;
      var wsdContent = `<div style="cursor: default;width: auto;min-width: 320px;height: 200px;padding:7px 7px 0px 6px;background: url(static/dataVisualization/commandCenter/firePopUpWindow.png) no-repeat;background-size: 100% 100%;color:#fff;">
        <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 6px;">
          <div style="font-size: 16px;font-family: Microsoft YaHei;font-weight: 400;font-style: italic;color: #F34336;">${item.name}</div>
          <div style="margin: 0 auto 0 9px;"><img src="static/dataVisualization/commandCenter/line-red.png"></div>
          <div style="cursor: pointer;margin:9px 2px 0px 0px;cursor: pointer;"><img src="static/dataVisualization/commandCenter/closeRed.png" onclick="removeOverlay1('${item.id}')"></div>
        </div>
        <div style="display: flex;justify-content: flex-start;align-items: center;padding: 0 6px;">
             <viewer><img style="width:200px;height:127px;margin-right: 8px;" src="${sensorDataObj.photo}"></viewer>
            <div style="width:calc(100% - 224px);">
                <div style="font-size:16px;font-weight: bold;color:#F34336;margin-bottom: 5px;">${deviceInformationObj.name}:<span style="color:#fff;margin-left: 5px;">编号：${item.id}</span></div>
                <div><span style="color:#FFA051;margin-right: 5px;">经度:</span>${item.lng}</div>
                <div><span style="color:#FFA051;margin-right: 5px;">纬度:</span>${item.lat}</div>
                <div><span style="color:#FFA051;margin-right: 5px;">创建时间:</span>${item.time}</div>
                <div><span style="color:#FFA051;margin-right: 5px;">设备编号:</span>${item.deviceId}</div>
                <div><span style="color:#FFA051;margin-right: 5px;">实时温湿度:</span>温度:15℃&nbsp&nbsp湿度15%</div>
            </div>
        </div>
      </div>`;
      var gmContent = `<div style="cursor: default;width: auto;min-width: 320px;height: 200px;padding:7px 7px 0px 6px;background: url(static/dataVisualization/commandCenter/firePopUpWindow.png) no-repeat;background-size: 100% 100%;color:#fff;">
        <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 6px;">
          <div style="font-size: 16px;font-family: Microsoft YaHei;font-weight: 400;font-style: italic;color: #F34336;">${item.name}</div>
          <div style="margin: 0 auto 0 9px;"><img src="static/dataVisualization/commandCenter/line-red.png"></div>
          <div style="cursor: pointer;margin:9px 2px 0px 0px;cursor: pointer;"><img src="static/dataVisualization/commandCenter/closeRed.png" onclick="removeOverlay1('${item.id}')"></div>
        </div>
        <div style="display: flex;justify-content: flex-start;align-items: center;padding: 0 6px;">
             <viewer><img style="width:200px;height:127px;margin-right: 8px;" src="${sensorDataObj.photo}"></viewer>
            <div style="width:calc(100% - 224px);">
                <div style="font-size:16px;font-weight: bold;color:#F34336;margin-bottom: 5px;">${deviceInformationObj.name}:<span style="color:#fff;margin-left: 5px;">编号：${item.id}</span></div>
                <div><span style="color:#FFA051;margin-right: 5px;">经度:</span>${item.lng}</div>
                <div><span style="color:#FFA051;margin-right: 5px;">纬度:</span>${item.lat}</div>
                <div><span style="color:#FFA051;margin-right: 5px;">创建时间:</span>${item.time}</div>
                <div><span style="color:#FFA051;margin-right: 5px;">设备编号:</span>${item.deviceId}</div>
                <div><span style="color:#FFA051;margin-right: 5px;">实时光敏:</span>光敏:15&nbsp&nbsplx</div>
            </div>
        </div>
      </div>`;
      var xspContent = `<div style="cursor: default;width: auto;min-width: 320px;height: 200px;padding:7px 7px 0px 6px;background: url(static/dataVisualization/commandCenter/firePopUpWindow.png) no-repeat;background-size: 100% 100%;color:#fff;">
        <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 6px;">
          <div style="font-size: 16px;font-family: Microsoft YaHei;font-weight: 400;font-style: italic;color: #F34336;">${item.name}</div>
          <div style="margin: 0 auto 0 9px;"><img src="static/dataVisualization/commandCenter/line-red.png"></div>
          <div style="cursor: pointer;margin:9px 2px 0px 0px;cursor: pointer;"><img src="static/dataVisualization/commandCenter/closeRed.png" onclick="removeOverlay1('${item.id}')"></div>
        </div>
        <div style="display: flex;justify-content: flex-start;align-items: center;padding: 0 6px;">
             <viewer><img style="width:200px;height:127px;margin-right: 8px;" src="${sensorDataObj.photo}"></viewer>
            <div style="width:calc(100% - 224px);">
                <div style="font-size:16px;font-weight: bold;color:#F34336;margin-bottom: 5px;">${deviceInformationObj.name}:<span style="color:#fff;margin-left: 5px;">编号：${item.id}</span></div>
                <div><span style="color:#FFA051;margin-right: 5px;">经度:</span>${item.lng}</div>
                <div><span style="color:#FFA051;margin-right: 5px;">纬度:</span>${item.lat}</div>
                <div><span style="color:#FFA051;margin-right: 5px;">创建时间:</span>${item.time}</div>
                <div><span style="color:#FFA051;margin-right: 5px;">设备编号:</span>${item.deviceId}</div>
                <div><span style="color:#FFA051;margin-right: 5px;">显示屏:<input type="text" id="myInput""><button onclick="myFunction()">显示屏</button></div>
            </div>
        </div>
      </div>`;
      var yybbContent = `<div style="cursor: default;width: auto;min-width: 320px;height: 200px;padding:7px 7px 0px 6px;background: url(static/dataVisualization/commandCenter/firePopUpWindow.png) no-repeat;background-size: 100% 100%;color:#fff;">
        <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 6px;">
          <div style="font-size: 16px;font-family: Microsoft YaHei;font-weight: 400;font-style: italic;color: #F34336;">${item.name}</div>
          <div style="margin: 0 auto 0 9px;"><img src="static/dataVisualization/commandCenter/line-red.png"></div>
          <div style="cursor: pointer;margin:9px 2px 0px 0px;cursor: pointer;"><img src="static/dataVisualization/commandCenter/closeRed.png" onclick="removeOverlay1('${item.id}')"></div>
        </div>
        <div style="display: flex;justify-content: flex-start;align-items: center;padding: 0 6px;">
             <viewer><img style="width:200px;height:127px;margin-right: 8px;" src="${sensorDataObj.photo}"></viewer>
            <div style="width:calc(100% - 224px);">
                <div style="font-size:16px;font-weight: bold;color:#F34336;margin-bottom: 5px;">${deviceInformationObj.name}:<span style="color:#fff;margin-left: 5px;">编号：${item.id}</span></div>
                <div><span style="color:#FFA051;margin-right: 5px;">经度:</span>${item.lng}</div>
                <div><span style="color:#FFA051;margin-right: 5px;">纬度:</span>${item.lat}</div>
                <div><span style="color:#FFA051;margin-right: 5px;">创建时间:</span>${item.time}</div>
                <div><span style="color:#FFA051;margin-right: 5px;">设备编号:</span>${item.deviceId}</div>
                <div><span style="color:#FFA051;margin-right: 5px;">语音播报:<input type="text" id="myInput""><button onclick="myFunction()">语音播报</button></div>
            </div>
        </div>
      </div>`;
      var gbContent = `<div style="cursor: default;width: auto;min-width: 320px;height: 200px;padding:7px 7px 0px 6px;background: url(static/dataVisualization/commandCenter/firePopUpWindow.png) no-repeat;background-size: 100% 100%;color:#fff;">
        <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 6px;">
          <div style="font-size: 16px;font-family: Microsoft YaHei;font-weight: 400;font-style: italic;color: #F34336;">${item.name}</div>
          <div style="margin: 0 auto 0 9px;"><img src="static/dataVisualization/commandCenter/line-red.png"></div>
          <div style="cursor: pointer;margin:9px 2px 0px 0px;cursor: pointer;"><img src="static/dataVisualization/commandCenter/closeRed.png" onclick="removeOverlay1('${item.id}')"></div>
        </div>
        <div style="display: flex;justify-content: flex-start;align-items: center;padding: 0 6px;">
             <viewer><img style="width:200px;height:127px;margin-right: 8px;" src="${sensorDataObj.photo}"></viewer>
            <div style="width:calc(100% - 224px);">
                <div style="font-size:16px;font-weight: bold;color:#F34336;margin-bottom: 5px;">${deviceInformationObj.name}:<span style="color:#fff;margin-left: 5px;">编号：${item.id}</span></div>
                <div><span style="color:#FFA051;margin-right: 5px;">经度:</span>${item.lng}</div>
                <div><span style="color:#FFA051;margin-right: 5px;">纬度:</span>${item.lat}</div>
                <div><span style="color:#FFA051;margin-right: 5px;">创建时间:</span>${item.time}</div>
                <div><span style="color:#FFA051;margin-right: 5px;">设备编号:</span>${item.deviceId}</div>
                <div><span style="color:#FFA051;margin-right: 5px;">广播:<input type="text" id="myInput""><button onclick="myFunction5()">播歌</button></div>
            </div>
        </div>
      </div>`;
      switch (item.name) {
        case "摄像头":
          // 人脸
          content = faceContent;
          break;
        case "消防器":
          // ai
          content = aiContent;
          break;
        case "温湿度":
          content = wsdContent;
          break;
        case "智慧灯杆":
          content = zhdgContent;
          break;
        case "光敏":
          content = gmContent;
          break;
        case "语音播报":
          content = yybbContent;
          break;
        case "广播":
          content = gbContent;
          break;
        case "显示屏":
          content = xspContent;
          break;
      }
      return content === undefined ? "" : content;
    },
    /**
     * 设备图标切换
     */
    doView(item) {
      this.current = item.code;
      if (item.code == "6") {
        // this.createMpa();
        this.$nextTick(async () => {
          this.drawingManager.markerOptions.icon.imageUrl =
            "static/dataVisualization/commandCenter/gonganxiaofang.png";
        });
      } else if (item.code == "5") {
        // this.createMpa();
        this.$nextTick(async () => {
          this.drawingManager.markerOptions.icon.imageUrl =
            "static/dataVisualization/commandCenter/shexiangtou.png";
        });
      } else if (item.code == "7") {
        // this.createMpa();
        this.$nextTick(async () => {
          this.drawingManager.markerOptions.icon.imageUrl =
            "static/dataVisualization/commandCenter/temperatureAddHumidity.png";
        });
      } else if (item.code == "8") {
        // this.createMpa();
        this.$nextTick(async () => {
          this.drawingManager.markerOptions.icon.imageUrl =
            "static/dataVisualization/commandCenter/smartLightPole.png";
        });
      } else if (item.code == "9") {
        // this.createMpa();
        this.$nextTick(async () => {
          this.drawingManager.markerOptions.icon.imageUrl =
            "static/dataVisualization/commandCenter/illumination.png";
        });
      } else if (item.code == "10") {
        // this.createMpa();
        this.$nextTick(async () => {
          this.drawingManager.markerOptions.icon.imageUrl =
            "static/dataVisualization/commandCenter/voiceAnnouncements.png";
        });
      } else if (item.code == "11") {
        // this.createMpa();
        this.$nextTick(async () => {
          this.drawingManager.markerOptions.icon.imageUrl =
            "static/dataVisualization/commandCenter/radioBroadcast.png";
        });
      } else if (item.code == "12") {
        // this.createMpa();
        this.$nextTick(async () => {
          this.drawingManager.markerOptions.icon.imageUrl =
            "static/dataVisualization/commandCenter/display.png";
        });
      }
      switch (item.code) {
        case "0": {
          this.drawingType = "";
          break;
        }
        case "1": {
          this.drawingType = BMAP_DRAWING_POLYLINE;
          break;
        }
        case "2": {
          this.drawingType = BMAP_DRAWING_RECTANGLE;
          break;
        }
        case "3": {
          this.drawingType = BMAP_DRAWING_POLYGON;
          break;
        }
        case "4": {
          this.drawingType = BMAP_DRAWING_CIRCLE;
          break;
        }
        case "5": {
          this.drawingType = BMAP_DRAWING_MARKER;
          break;
        }
        case "6": {
          this.drawingType = BMAP_DRAWING_MARKER;
          break;
        }
        case "7": {
          this.drawingType = BMAP_DRAWING_MARKER;
          break;
        }
        case "8": {
          this.drawingType = BMAP_DRAWING_MARKER;
          break;
        }
        case "9": {
          this.drawingType = BMAP_DRAWING_MARKER;
          break;
        }
        case "10": {
          this.drawingType = BMAP_DRAWING_MARKER;
          break;
        }
        case "11": {
          this.drawingType = BMAP_DRAWING_MARKER;
          break;
        }
        case "12": {
          this.drawingType = BMAP_DRAWING_MARKER;
          break;
        }
      }
      // 进行百度地图硬件绘制
      if (this.drawingType == "") {
        this.drawingManager.close();
        this.createMpa();
      } else {
        this.drawingManager.setDrawingMode(this.drawingType);
        this.drawingManager.open();
        // if (
        //   this.drawingManager._isOpen &&
        //   this.drawingManager.getDrawingMode() === this.drawingType
        // ) {
        //   this.drawingManager.close();
        // } else {
        //   this.drawingManager.setDrawingMode(this.drawingType);
        //   this.drawingManager.open();
        // }
      }
    },
    echarts1(leftOneObj) {
      //左边设备
      //检测是否已经存在echarts实例，如果不存在，则不再去初始化
      let myChart = echarts.getInstanceByDom(this.$refs.chart);
      if (myChart == null) {
        myChart = echarts.init(this.$refs.chart);
      }
      var option;
      option = {
        title: {
          top: "10%",
          left: "5%",
          text: "硬件数比例",
          textStyle: {
            // 图例的公用文本样式。
            fontSize: 15,
            color: "#fff",
          },
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          bottom: "10%",
          textStyle: {
            // 图例的公用文本样式。
            fontSize: 12,
            color: "#fff",
          },
          left: "center",
        },
        series: [
          {
            name: "设备数",
            type: "pie",
            bottom: "10%",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 15,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: leftOneObj.camera, name: "摄像头" },
              { value: leftOneObj.fireExtinguisher, name: "消防器" },
              { value: leftOneObj.temperatureAndHumidity, name: "温湿度" },
              { value: leftOneObj.smartLightPole, name: "智慧灯杆" },
            ],
          },
        ],
      };
      option && myChart.setOption(option);
    },
    echarts2(temperature, humidity, illumination, time) {
      //检测是否已经存在echarts实例，如果不存在，则不再去初始化
      let myChart = echarts.getInstanceByDom(this.$refs.chart2);
      if (myChart == null) {
        myChart = echarts.init(this.$refs.chart2);
      }
      var option;
      option = {
        title: {
          top: "10%",
          left: "5%",
          text: "实时温度湿度光敏",
          textStyle: {
            // 图例的公用文本样式。
            fontSize: 15,
            color: "#fff",
          },
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          bottom: "5%",
          textStyle: {
            // 图例的公用文本样式。
            fontSize: 12,
            color: "#fff",
          },
          data: ["温度", "湿度", "光敏"],
        },
        grid: {
          top: "25%",
          left: "3%",
          right: "10%",
          bottom: "15%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: time,
          axisLabel: {
            show: true,
            color: "#ffffff",
            fontSize: 10,
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            show: true,
            color: "#ffffff",
            fontSize: 12,
          },
        },
        series: [
          {
            name: "温度",
            type: "line",
            stack: "Total",
            data: temperature,
            smooth: true,
          },
          {
            name: "湿度",
            type: "line",
            stack: "Total",
            data: humidity,
            smooth: true,
          },
          {
            name: "光敏",
            type: "line",
            stack: "Total",
            data: illumination,
            smooth: true,
          },
        ],
      };

      option && myChart.setOption(option);
    },
    echarts3(leftOneObj, rightOneObj) {
      /**
       * 雷达图
       */
      //检测是否已经存在echarts实例，如果不存在，则不再去初始化
      let myChart = echarts.getInstanceByDom(this.$refs.chart3);
      if (myChart == null) {
        myChart = echarts.init(this.$refs.chart3);
      }
      var option;
      option = {
        color: ["#F8C757", "#91CC75"],
        title: {
          top: "10%",
          left: "5%",
          text: "设备比例分布",
          textStyle: {
            // 图例的公用文本样式。
            fontSize: 15,
            color: "#fff",
          },
        },
        legend: {
          bottom: "5%",
          textStyle: {
            // 图例的公用文本样式。
            fontSize: 12,
            color: "#fff",
          },
          data: [
            {
              // 图例的数据数组。数组项通常为一个字符串，每一项代表一个系列的 name（如果是饼图，也可以是饼图单个数据的 name）。图例组件会自动根据对应系列的图形标记（symbol）来绘制自己的颜色和标记，特殊字符串 ''（空字符串）或者 ''（换行字符串）用于图例的换行。
              name: "设备一",
              // 图例项的 icon。
              textStyle: {
                // 图例项的文本样式。
                fontWeight: "bold", // 文字字体的粗细，可选'normal'，'bold'，'bolder'，'lighter'
              },
            },
            {
              name: "设备二",
              textStyle: {
                fontWeight: "bold", // 文字字体的粗细，可选'normal'，'bold'，'bolder'，'lighter'
              },
            },
          ],
        },
        radar: [
          {
            // shape: 'circle',
            indicator: [
              { name: "摄像头", max: 5 },
              { name: "消防器", max: 5 },
              { name: "温湿度", max: 5 },
              { name: "智慧灯杆", max: 5 },
              { name: "光敏", max: 5 },
              { name: "语音播报", max: 5 },
              { name: "广播", max: 5 },
              { name: "显示屏", max: 5 },
            ],
            center: ["50%", "47%"],
            radius: 85,
            axisName: {
              color: "#fff",
              fontSize: 15,
            },
          },
        ],
        series: [
          {
            type: "radar",
            data: [
              {
                value: [
                  leftOneObj.camera,
                  leftOneObj.fireExtinguisher,
                  leftOneObj.temperatureAndHumidity,
                  leftOneObj.smartLightPole,
                  rightOneObj.illumination,
                  rightOneObj.voiceAnnouncements,
                  rightOneObj.radioBroadcast,
                  rightOneObj.display,
                ],
                name: "设备一",
                itemStyle: {
                  normal: {
                    borderColor: "#fff",
                    borderWidth: 1,
                  },
                },
                lineStyle: {
                  normal: {
                    opacity: 0.9,
                  },
                },
                areaStyle: {
                  normal: {
                    color: "rgba(248,199,87,1)",
                  },
                },
              },
              {
                value: [
                  leftOneObj.camera,
                  leftOneObj.fireExtinguisher,
                  leftOneObj.temperatureAndHumidity,
                  leftOneObj.smartLightPole,
                  rightOneObj.illumination,
                  rightOneObj.voiceAnnouncements,
                  rightOneObj.radioBroadcast,
                  rightOneObj.display,
                ],
                name: "设备二",
                itemStyle: {
                  // 单个拐点标志的样式设置。
                  normal: {
                    borderColor: "#fff",
                    // 拐点的描边颜色。[ default: '#000' ]
                    borderWidth: 1,
                    // 拐点的描边宽度，默认不描边。[ default: 0 ]
                  },
                },
                lineStyle: {
                  // 单项线条样式。
                  normal: {
                    opacity: 0.9, // 图形透明度
                  },
                },
                areaStyle: {
                  // 单项区域填充样式
                  normal: {
                    color: "rgba(145,204,117,1)", // 填充的颜色。[ default: "#000" ]
                  },
                },
              },
            ],
          },
        ],
      };
      option && myChart.setOption(option);
      /**
       * 饼图
       */
      // var chartDom = document.getElementById("main3");
      // var myChart = echarts.init(chartDom);
      // var option;
      // option = {
      //   title: {
      //     top: "10%",
      //     left: "5%",
      //     text: "在线设备",
      //     textStyle: {
      //       // 图例的公用文本样式。
      //       fontSize: 15,
      //       color: "#fff",
      //     },
      //   },
      //   tooltip: {
      //     trigger: "item",
      //     formatter: "{a} <br/>{b} : {c} ({d}%)",
      //   },
      //   legend: {
      //     bottom: "10%",
      //     textStyle: {
      //       // 图例的公用文本样式。
      //       fontSize: 12,
      //       color: "#fff",
      //     },
      //   },
      //   series: [
      //     {
      //       name: "在线设备",
      //       type: "pie",
      //       radius: [20, 100],
      //       center: ["50%", "43%"],
      //       roseType: "area",
      //       itemStyle: {
      //         borderRadius: 8,
      //         borderColor: "#fff",
      //         borderWidth: 1,
      //       },
      //       data: [
      //         { value: 1048, name: "摄像头" },
      //         { value: 735, name: "智慧灯杆" },
      //         { value: 580, name: "消防器" },
      //         { value: 484, name: "温湿度" },
      //         { value: 300, name: "光敏" },
      //       ],
      //     },
      //   ],
      // };
      // option && myChart.setOption(option);
    },
    echarts4(rightOneObj) {
      //检测是否已经存在echarts实例，如果不存在，则不再去初始化
      let myChart = echarts.getInstanceByDom(this.$refs.chart4);
      if (myChart == null) {
        myChart = echarts.init(this.$refs.chart4);
      }
      var option;
      option = {
        title: {
          top: "10%",
          left: "5%",
          text: "硬件数比例",
          textStyle: {
            // 图例的公用文本样式。
            fontSize: 15,
            color: "#fff",
          },
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          bottom: "10%",
          textStyle: {
            // 图例的公用文本样式。
            fontSize: 12,
            color: "#fff",
          },
          left: "center",
        },
        series: [
          {
            name: "设备数",
            type: "pie",
            bottom: "10%",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 15,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: rightOneObj.illumination, name: "光敏" },
              { value: rightOneObj.voiceAnnouncements, name: "语音播报" },
              { value: rightOneObj.radioBroadcast, name: "广播" },
              { value: rightOneObj.display, name: "显示屏" },
            ],
          },
        ],
      };
      option && myChart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  width: 1920px;
  height: 980px;
  position: relative;
  .bm-view {
    position: absolute;
    width: 1920px;
    height: 980px;
    z-index: 2;
  }
  .left {
    position: absolute;
    width: 480px;
    height: 652px;
    top: 0;
    left: 0;
    z-index: 3;
    .letfOne {
      width: 480px;
      height: 326px;
      background: url(~@/assets/dataVisualization/frame2.png) no-repeat center;
      position: relative;
      .iocn {
        cursor: pointer;
        width: 340px;
        height: 180px;
        position: absolute;
        left: 65px;
        top: 85px;
        .iocn1 {
          position: relative;
          float: left;
          width: 160px;
          height: 80px;
          background: url(~@/assets/dataVisualization/commandCenter/iocn.png);
          .rotate {
            position: absolute;
            top: 13.5px;
            left: 13.5px;
            width: 53px;
            height: 53px;
            background: url(~@/assets/dataVisualization/commandCenter/rotate.png)
              no-repeat;
            background-size: 100% 100%;
            animation: rotate 1.2s linear infinite;
          }
          .icon2 {
            top: 19.5px;
            left: 26.5px;
            position: absolute;
            width: 2em;
            height: 2em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
            margin-top: 5px;
          }
          .title {
            position: absolute;
            color: white;
            font-size: 1.1em;
            top: 10.5px;
            left: 75.5px;
          }
          .data {
            position: absolute;
            color: #47ffff;
            font-size: 1.1em;
            top: 38.5px;
            left: 75.5px;
          }
        }
      }
    }
    .letfTwo {
      width: 480px;
      height: 326px;
      background: url(~@/assets/dataVisualization/frame.png) no-repeat center;
      position: relative;
      .bar {
        position: absolute;
        top: 40px;
        width: 480px;
        height: 45px;
        padding-left: 120px;
        line-height: 45px;
        color: #47ffff;
        font-size: 20px;
        background: url(~@/assets/dataVisualization/bar.png) no-repeat center;
      }
      .seamless-warp {
        cursor: pointer;
        position: absolute;
        top: 100px;
        width: 480px;
        height: 170px;
        overflow: hidden;
        text-align: center;
        .item li {
          height: 34px;
          width: 480px;
          text-align: center;
          line-height: 34px;
          font-size: 1em;
          .userName {
            color: white;
          }
          .time {
            color: white;
            margin-left: 10px;
          }
          .operation {
            color: #28f1fa;
            margin-left: 10px;
          }
          .name {
            color: #47ffff;
            margin-left: 10px;
          }
          .id {
            color: #47ffff;
          }
        }
      }
    }
  }
  .between {
    position: absolute;
    width: 960px;
    height: 50px;
    z-index: 3;
    bottom: 328px;
    left: 480px;
    ul {
      width: 780px;
      height: 50px;
      margin: 0 auto;
      li {
        width: 60px;
        height: 50px;
        float: left;
        line-height: 50px;
        text-align: center;
        color: white;
        list-style-type: none;
        box-sizing: border-box;
        border: 1px solid #28f1fa;
        background: rgba(#0f2040, 1);
        cursor: pointer;
        .icon2 {
          width: 2em;
          height: 2em;
          vertical-align: -0.15em;
          fill: currentColor;
          overflow: hidden;
          margin-top: 5px;
        }
      }
    }
  }
  .right {
    position: absolute;
    width: 480px;
    height: 652px;
    right: 0;
    top: 0;
    z-index: 3;
    .rightOne {
      width: 480px;
      height: 326px;
      background: url(~@/assets/dataVisualization/frame2.png) no-repeat center;
      position: relative;
      .iocn {
        cursor: pointer;
        width: 340px;
        height: 180px;
        position: absolute;
        left: 65px;
        top: 85px;
        .iocn1 {
          position: relative;
          float: left;
          width: 160px;
          height: 80px;
          background: url(~@/assets/dataVisualization/commandCenter/iocn.png);
          .rotate {
            position: absolute;
            top: 13.5px;
            left: 13.5px;
            width: 53px;
            height: 53px;
            background: url(~@/assets/dataVisualization/commandCenter/rotate.png)
              no-repeat;
            background-size: 100% 100%;
            animation: rotate 1.2s linear infinite;
          }
          .icon2 {
            top: 19.5px;
            left: 23.5px;
            position: absolute;
            width: 2em;
            height: 2em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
            margin-top: 5px;
          }
          .title {
            position: absolute;
            color: white;
            font-size: 1.2em;
            top: 10.5px;
            left: 75.5px;
          }
          .data {
            position: absolute;
            color: #47ffff;
            font-size: 1.2em;
            top: 38.5px;
            left: 75.5px;
          }
        }
      }
    }
    .rightTwo {
      width: 480px;
      height: 326px;
      background: url(~@/assets/dataVisualization/frame.png) no-repeat center;
      position: relative;
      .bar {
        position: absolute;
        top: 40px;
        width: 480px;
        height: 45px;
        padding-left: 120px;
        line-height: 45px;
        color: #47ffff;
        font-size: 20px;
        background: url(~@/assets/dataVisualization/bar.png) no-repeat center;
      }
      .seamless-warp {
        cursor: pointer;
        position: absolute;
        top: 100px;
        width: 480px;
        height: 170px;
        overflow: hidden;
        text-align: center;
        .item li {
          height: 34px;
          width: 480px;
          text-align: center;
          line-height: 34px;
          font-size: 1em;
          .userName {
            color: white;
          }
          .time {
            color: white;
            margin-left: 10px;
          }
          .operation {
            color: #28f1fa;
            margin-left: 10px;
          }
          .name {
            color: #47ffff;
            margin-left: 10px;
          }
          .id {
            color: #47ffff;
          }
        }
      }
    }
  }
  .bottom {
    position: absolute;
    width: 1920px;
    height: 328px;
    bottom: 0;
    z-index: 3;
    .bottomOne {
      float: left;
      width: 480px;
      height: 328px;
      background: url(~@/assets/dataVisualization/frame.png) no-repeat center;
      position: relative;
      overflow: hidden;
      #main {
        position: absolute;
        left: 28px;
      }
    }
    .bottomTwo {
      float: left;
      width: 480px;
      height: 328px;
      background: url(~@/assets/dataVisualization/frame.png) no-repeat center;
      position: relative;
      #main2 {
        position: absolute;
        left: 28px;
      }
    }
    .bottomTree {
      float: left;
      width: 480px;
      height: 328px;
      background: url(~@/assets/dataVisualization/frame.png) no-repeat center;
      position: relative;
      #main3 {
        position: absolute;
        left: 28px;
      }
    }
    .bottomFour {
      float: left;
      width: 480px;
      height: 328px;
      background: url(~@/assets/dataVisualization/frame.png) no-repeat center;
      position: relative;
      #main4 {
        position: absolute;
        left: 28px;
      }
    }
  }
}
</style>
